/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
// 封装渲染函数
const creator = '老张'
function getBookList() {
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      creator
    }
  }).then(res => {
    console.log(res)
    const bookList = res.data.data
    console.log(bookList)
    const str = bookList.map((item, index) => {
      return `
        <tr>
          <td>${index + 1}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
         <td data-id="${item.id}">
         <span class="del">删除</span>
         <span class="edit">修改</span>
         </td>
        </tr>`
    }).join('')
    console.log(str)
    document.querySelector('.list').innerHTML = str
  })
}
getBookList()
//增加数据
const addmodaldom = document.querySelector('.add-modal')
const addmodal = new bootstrap.Modal(addmodaldom)
document.querySelector('.add-btn').addEventListener('click', () => {
  // 获取数据
  const addform = document.querySelector('.add-form')
  const bookobj = serialize(addform, { hash: true, empty: true })
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: 'POST',
    data: {
      ...bookobj,
      creator
    }
  }).then(res => {
    console.log(res)
    getBookList()
    addform.reset()
    addmodal.hide()
  })
  // 关闭模态框
  addmodal.hide()
})
// 删除数据
document.querySelector('.list').addEventListener('click', e => {
  if (e.target.classList.contains('del')) {
    const id = e.target.parentNode.dataset.id
    console.log(id)
    axios({
      url: `http://hmajax.itheima.net/api/books/${id}`,
      method: 'DELETE'
    }).then(res => {
      console.log(res)
      getBookList()
    })
  }
})
// 修改数据
const editmodaldom = document.querySelector('.edit-modal')
const editmodal = new bootstrap.Modal(editmodaldom)
document.querySelector('.list').addEventListener('click', e => {
  if (e.target.classList.contains('edit')) {
    const id = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${id}`,
      method: 'GET'
    }).then(res => {
      console.log(res)
      const bookObj = res.data.data
      // document.querySelector('.edit-form .bookname').value = bookObj.bookname
      // document.querySelector('.edit-form .author').value = bookObj.author
      // document.querySelector('.edit-form .publisher').value = bookObj.publisher
      // document.querySelector('.edit-form .id').value = bookObj.id
      const keys = Object.keys(bookObj)
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i]
        document.querySelector(`.edit-form .${key}`).value = bookObj[key]
      }
    })
    editmodal.show()
  }
})
// 修改数据之后保存=》隐藏弹框
document.querySelector('.edit-btn').addEventListener('click', () => {
  const editform = document.querySelector('.edit-form')
  const bookobj = serialize(editform, { hash: true, empty: true })
  axios({
    url: `http://hmajax.itheima.net/api/books/${bookobj.id}`,
    method: 'PUT',
    data: {
      ...bookobj,
      creator
    }
  }).then(res => {
    console.log(res)
    getBookList()
    editmodal.hide()
  })
})
